<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect, toRefs } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Config from "../../components/mapInfoObj/mapConfig.js"

const search = ref('')

const getName = (name, idx) => {
    let str=""
    let splitArr = ['到', '-', '至']
    splitArr.forEach(item => {
        if (name.includes(item)) {
            str= name.split(item)[idx]
        }
    })
    return str
}

const handleSearch=()=>{
    
}
</script>

<template>
    <div class="hxtq">
        <section id="search">
            <el-input v-model="search" placeholder="查询航线">
                <template #append>
                    <el-button :icon="Search" @click="handleSearch" />
                </template>
            </el-input>
        </section>
        <section id="main">
            <el-table :data="Config.lineList" style="width: 100%;height: 400px;">
                <el-table-column prop="objectId" label="ID" width="60" />
                <el-table-column prop="name" label="起点">
                    <template #default="{ row }">
                        <div style="display: flex;flex-direction: column;">
                            <!-- {{ row?.name?.split('到')[0] }} -->
                            <span>{{ getName(row?.name, 0) }}</span>
                            
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="终点">
                    <template #default="{ row }">
                        <div style="display: flex;flex-direction: column;">
                            {{ getName(row?.name, 1) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="shapeLength" label="距离(km)">
                    <template #default="{ row }">
                        <div style="display: flex;flex-direction: column;">
                            {{ row?.shapeLength?.toFixed(2) }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </section>
    </div>
</template>

<style lang="less" scoped>
.hxtq {
    height: 100%;

    #search {
        height: 40px;
        padding: 5px;
    }

    #main {
        height: calc(100% - 40px);
    }
}
</style>